<!-- 害虫列表dev_type==1 -->
<template>
	<view class="page">
		<template v-if="token && isLogin">
			<view class="h45 m-b2">
				<view class="fix-wrap search-tool">
					<view class="search-tool-form">
						<view class="iconfont">&#xe663;</view>
						<template v-if="dev_type == 1">
							<input type="text" confirm-type="search" class="key-inp" placeholder="输入害虫名称" @input="setKeyword" />
						</template>
						<template v-if="dev_type == 2">
							<input type="text" confirm-type="search" class="key-inp" placeholder="输入设备名称" />
						</template>
					</view>
				</view>
			</view>
			<view class="body">
				<template v-if="!loadingState.default">
					<template v-if="list.length > 0">
						<template v-if="dev_type == 1">
							<view class="list-wrap">
								<view class="item" v-for="(item, index) in filterList" :key="index" @click="selectPest(item.id, item.pest_name, item.pest_cname)">
									<view class="title">{{ item.pest_name }}</view>
								</view>
							</view>
							<loading :loadingState="loadingState"></loading>
						</template>
						<template v-else-if="dev_type == 2">
							<view class="list-wrap">
								<view class="item" v-for="(item, index) in list" :key="index" @click="selectDevName(item.id, item.device_name)">
									<view class="title">{{ item.device_name }}</view>
								</view>
							</view>
							<loading :loadingState="loadingState"></loading>
						</template>
					</template>
					<empty v-else><view slot="text">没有相关信息</view></empty>
				</template>
				<template v-else>
					<loading :loadingState="loadingState"></loading>
				</template>
			</view>
		</template>
	</view>
</template>

<script>
import loading from '@/components/loading-more.vue';
import empty from '@/components/empty.vue';
import { getCurrenPage } from '@/common/util.js';
export default {
	name: 'name',
	data() {
		return {
			token: uni.getStorageSync('token'),
			appid: getApp().globalData.appid,
			userInfo: uni.getStorageSync('userInfo'),
			isLogin: false,
			loginStateUpdate: false,
			loadingState: {
				default: true,
				loading: false,
				completed: false
			},
			params: {
				page: 1,
				limit: 'all'
			},
			dev_type: '', // 1 性诱
			list: [],
			filterList: []
		};
	},
	async onLoad(params) {
		this.dev_type = params.dev_type;

		if (this.token) {
			this.isLogin = await this.$loginState('check');
			if (this.isLogin) {
				if (this.dev_type == 1) {
					this.getxyPest();
				} else if (this.dev_type == 2) {
					this.getDevList();
				}
			} else {
				this.isLogin = await this.$loginState('reset');
			}
		}
	},
	async onShow() {
		if (this.loginStateUpdate) {
			this.token = uni.getStorageSync('token');
			this.userInfo = uni.getStorageSync('userInfo');
			this.isLogin = true;
			this.loginStateUpdate = false;
		}

		if (!this.token && !this.isLogin) {
			this.isLogin = await this.$loginState('reset');
		}
	},

	onReady() {
		if (this.dev_type == 1) {
			uni.setNavigationBarTitle({
				title: '害虫种类'
			});
		} else if (this.dev_type == 2) {
			uni.setNavigationBarTitle({
				title: '设备名称'
			});
		}
	},

	methods: {
		getxyPest: async function() {
			let res = await this.$api.tool_api.getXypzPestList({
				appid: this.appid,
				token: this.token,
				page: this.params.page,
				limit: this.params.limit
			});
			if (res.data.ret == 1000) {
				this.loadingState.default = false;
				this.loadingState.completed = true;
				this.list = res.data.data;
				this.filterList = [...res.data.data];
			}
			console.log(res);
		},

		selectPest: function(id, name, cname) {
			let prevPage = getCurrenPage(2);
			prevPage.$vm.pests.id = id;
			prevPage.$vm.pests.name = name;
			prevPage.$vm.params.attr_name = name;
			prevPage.$vm.params.attr_num = 'RF-' + cname.toLocaleUpperCase();
			uni.navigateBack({
				delta: 1
			});
		},

		getDevList: async function() {
			let res = await this.$api.tool_api.getXypzDevList({
				appid: this.appid,
				token: this.token,
				user_id: this.userInfo.uid,
				device_type: 14
			});
			console.log('设备列表', res);
			if (res.data.ret == 1000) {
				this.loadingState.default = false;
				this.loadingState.completed = true;
				this.list = res.data.data;
			}
		},

		selectDevName(id, name) {
			let prevPage = getCurrenPage(2);
			prevPage.$vm.dev_name = name;
			prevPage.$vm.dev_id = id;
			uni.navigateBack({
				delta: 1
			});
		},

		setKeyword(e) {
			if (this.dev_type == 1) {
				clearTimeout(this.timer);
				this.timer = setTimeout(() => {
					// console.log(1111);
					this.keyword = e.detail.value;
					this.filterList = this.list.filter(item => item.pest_name.indexOf(this.keyword) > -1);
					this.timer = null;
				}, 500);
			}
		}
	},
	components: {
		empty,
		loading
	},
	computed: {},
	watch: {}
};
</script>

<style lang="less">
.search-tool-form {
	margin: 7px 10px;
	// height: 30px;
	border: 2rpx solid #ddd;
	background: #f2f2f2;
	border-radius: 38rpx;
	display: flex;
	flex-grow: 2;

	.iconfont {
		width: 60rpx;
		text-align: center;
		line-height: 60rpx;
		color: #999;
		font-size: 44rpx;
	}

	.key-inp {
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		color: #666;
		flex-grow: 2;
	}
}

.list-wrap {
	background: #fff;

	.item {
		padding: 20rpx 0;
		border-bottom: 2rpx solid #eee;
		margin-left: 20rpx;

		.title {
			padding-left: 10rpx;
			margin-bottom: 10rpx;
			font-size: 30rpx;
		}

		.time {
			padding-left: 10rpx;
			font-size: 24rpx;
			color: #999;
		}
	}
}
</style>
